/*
 * @Author: sdorein sdorein@163.com
 * @Date: 2024-07-31 11:30:10
 * @LastEditors: sdorein sdorein@163.com
 * @LastEditTime: 2024-07-31 16:12:33
 * @FilePath: \vite-ts-project\src\plugins\components.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// plugins/components.ts

 import type { App } from 'vue'
import {  defineAsyncComponent } from "vue";

import type { AsyncComponentLoader } from "vue"; // vue3+ts+vite 加上type,不然会报错。

const components = import.meta.glob("./../components/**/*.vue"); //全局这个无论多少层级
console.log(components);
/**
 * 全局组件引用管理
 */
export default {
  install(app: App) {
    console.log(app)
    for (const [key, value] of Object.entries(components)) {
      const parts = key.split('/'); 
      console.log(parts[2],key);
      // 字符串截取，具体看下面console.log()中的name就知道了
      const name = parts[2];
      console.log(name)
      console.log(value);
      console.log(defineAsyncComponent(value as AsyncComponentLoader))
      console.log(`注意这里的name名称=》》            ${name}       ===>这个名称，
      自己作为了全局祖册组件的名称了,也就是如左侧目录的：aaa.vue去掉.vue就剩下aaa了
      ，然后那这个名称作为组件引用的名称，具体看截图就知道了。这时就是相当于跟左侧
      项目目录的.vue结尾的文件去掉.vue得到的名称`);
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
    }
  },
};
